<template>
  <!-- 碳排放总量 -->
  <div class="card-item item-style-1" v-loading="loading">
    <div class="title">碳排放总量</div>
    <div class="comparison">
      <p class="text">较上年</p>
      <div v-if="emissionIsDeuce" style="width: 20px; text-align: center"> - </div>
      <div v-else :class="emissionIsUp ? 'unit-up' : 'unit-down'">
        <!-- 上升下降-图标 -->
        <c-icon class="comparison-icon icon" :type="emissionIconStr"></c-icon>
        <!-- 碳排放总量-百分比 -->
        <span>{{ currentYearInfo.firstTrendStatistics!.totalEmissionRate }}%</span>
      </div>
    </div>
    <div class="total g-ell">
      <!-- 碳排放总量 -->
      <span class="sum">{{
        dataFormatter(currentYearInfo.firstTrendStatistics!.totalEmission)
      }}</span>
      <!-- 单位 -->
      <span class="unit">{{
        justRenderResultUnit(Number(currentYearInfo.firstTrendStatistics!.totalEmission))
      }}</span>
    </div>
  </div>
  <!-- 碳排放强度 -->
  <div class="card-item item-style-2" v-loading="loading">
    <div class="title">碳排放强度</div>
    <div class="comparison">
      <p class="text">较上年</p>
      <div v-if="emissionStrengthIsDeuce" style="width: 20px; text-align: center"> - </div>
      <div v-else :class="emissionStrengthIsUp ? 'unit-up' : 'unit-down'">
        <c-icon class="comparison-icon icon" :type="emissionStrengthIconStr"></c-icon>
        <span>{{ currentYearInfo.firstTrendStatistics!.emissionStrengthRate }}%</span></div
      >
    </div>
    <div class="total g-ell">
      <span class="sum">{{
        dataFormatter(currentYearInfo.firstTrendStatistics!.emissionStrength)
      }}</span>
      <span class="unit"
        >{{
          justRenderResultUnit(Number(currentYearInfo.firstTrendStatistics!.totalEmission))
        }}/台</span
      >
    </div>
  </div>
  <!-- 总数 -->
  <div class="card-item item-style-3" v-loading="loading">
    <div class="title">总数</div>
    <div class="comparison">
      <p class="text">总盘查组织数</p>
    </div>
    <div class="total">
      <span class="sum">{{ thousandFormat(currentYearInfo.orgCount) }}</span>
      <span class="unit">家</span>
    </div>
  </div>
  <!-- 已完成数 -->
  <div class="card-item item-style-4" v-loading="loading">
    <div class="title">已完成数</div>
    <div class="comparison">
      <p class="text">已完成盘查组织数</p>
    </div>
    <div class="total">
      <span class="sum">{{ thousandFormat(currentYearInfo.orgEmissionCount) }}</span>
      <span class="unit">家</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { watch, inject, ComputedRef, ref, computed } from 'vue';
import {
  queryAnalysisParams,
  analysisTopType
} from '@/apis/eci/visualAnalysis/model/visualAnalysisModel';
import { queryAnalysisHeader } from '@/apis/eci/visualAnalysis';
import { thousandFormat, justRenderResultValue, justRenderResultUnit } from '@/utils';

interface injectParams {
  queryParams: queryAnalysisParams;
  organizationName: ComputedRef;
}
const params = inject('params') as injectParams;
const currentYearInfo = ref<analysisTopType>({
  firstTrendStatistics: {
    totalEmission: '', // 碳排放总量
    totalEmissionRate: '', // 碳排放总量比
    totalEmissionRateType: '', // 碳排放总量浮度(STRAIGHT 上浮 BURDEN 下浮 EQUATION 打平)
    emissionStrength: '', // 碳排放强度
    emissionStrengthRate: '', // 碳排放强度比
    emissionStrengthRateType: '' // 碳排放强度浮度(STRAIGHT 上浮 BURDEN 下浮 EQUATION 打平)
  },
  orgCount: '', // 机构总数
  orgEmissionCount: '' // 已完成盘查机构数
});
const loading = ref(false);
watch(params.queryParams, () => {
  loadData();
});

const dataFormatter = (data: string) => {
  if (data === '') {
    return '-';
  } else {
    // return Number('181306.800000').toFixed(6);
    return thousandFormat(justRenderResultValue(Number(data)));
  }
};

const loadData = async () => {
  try {
    if (params.queryParams.inventoryYear) {
      loading.value = true;
      const res: analysisTopType = await queryAnalysisHeader(params.queryParams);
      if (res.firstTrendStatistics) {
        // 存在 firstTrendStatistics 为 null 的情况
        currentYearInfo.value = res;
      } else {
        // 如果firstTrendStatistics 为 null 恢复默认值
        currentYearInfo.value = {
          firstTrendStatistics: {
            totalEmission: '', // 碳排放总量
            totalEmissionRate: '', // 碳排放总量比
            totalEmissionRateType: '', // 碳排放总量浮度(STRAIGHT 上浮 BURDEN 下浮 EQUATION 打平)
            emissionStrength: '', // 碳排放强度
            emissionStrengthRate: '', // 碳排放强度比
            emissionStrengthRateType: '' // 碳排放强度浮度(STRAIGHT 上浮 BURDEN 下浮 EQUATION 打平)
          },
          orgCount: '', // 机构总数
          orgEmissionCount: '' // 已完成盘查机构数
        };
      }
      console.log('盘查-图形趋势分析-标头-queryAnalysisHeader', res);
    }
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};
loadData();

// 碳排放总量-是否上升
const emissionIsUp = computed(() => {
  return currentYearInfo.value.firstTrendStatistics?.totalEmissionRateType === 'STRAIGHT';
});
// 碳排放总量-是否打平
const emissionIsDeuce = computed(() => {
  return (
    currentYearInfo.value.firstTrendStatistics?.totalEmissionRateType === 'EQUATION' ||
    currentYearInfo.value.firstTrendStatistics?.totalEmissionRateType === '-' ||
    currentYearInfo.value.firstTrendStatistics?.totalEmissionRateType === ''
  );
});
// 碳排放总量-上升下降图标
const emissionIconStr = computed(() => {
  return emissionIsUp.value ? 'c-xian-jianshang' : 'c-xian-jianxia';
});
// 碳排放强度-是否上升
const emissionStrengthIsUp = computed(() => {
  return currentYearInfo.value.firstTrendStatistics?.emissionStrengthRateType === 'STRAIGHT';
});
// 碳排放强度-是否打平
const emissionStrengthIsDeuce = computed(() => {
  return (
    currentYearInfo.value.firstTrendStatistics?.emissionStrengthRateType === 'EQUATION' ||
    currentYearInfo.value.firstTrendStatistics?.emissionStrengthRateType === '-' ||
    currentYearInfo.value.firstTrendStatistics?.emissionStrengthRateType === ''
  );
});
// 碳排放强度-上升下降图标
const emissionStrengthIconStr = computed(() => {
  return emissionStrengthIsUp.value ? 'c-xian-jianshang' : 'c-xian-jianxia';
});
</script>

<style lang="scss" scoped>
.item-style-1 {
  border: 1px solid #d3e1e6;
  background: linear-gradient(220deg, #e6f5fe 0%, #f4fbff 100%);
  .title {
    color: #244573;
  }
  .comparison {
    .unit-up {
      color: #ff4829;
    }
    .unit-down {
      color: #20a26a;
    }
  }
  .total {
    color: #174a66;
  }
}
.item-style-2 {
  border: 1px solid #d5e6e5;
  background: linear-gradient(180deg, #e7f6f1 0%, #f5fbf9 100%);
  .title {
    color: #014434;
  }
  .comparison {
    .unit-up {
      color: #ff4829;
    }
    .unit-down {
      color: #20a26a;
    }
  }
  .total {
    color: #014434;
  }
}
.item-style-3 {
  border: 1px solid #d6dae6;
  background: linear-gradient(180deg, #f2f2fe 0%, #fafaff 100%);
  .title {
    color: #352a4d;
  }
  .total {
    color: #352a4d;
  }
}
.item-style-4 {
  border: 1px solid #deded3;
  background: linear-gradient(180deg, #f8f8ec 0%, #fcfcf7 100%);
  .title {
    color: #753e20;
  }
  .total {
    color: #422312;
  }
}
.card-item {
  flex: 1;
  margin-right: 16px;
  padding: 12px 16px 16px 16px;
  height: 112px;
  border-radius: 6px;
  // border: 1px solid #d3e1e6;
  font-family: PingFangSC, PingFang SC;
  .title {
    height: 22px;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
  }
  .comparison {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
    color: #7a8a99;
    line-height: 20px;
    .comparison-icon {
      margin: 2px 0 0 2px;
    }
    .unit {
      font-size: 12px;
      font-family: D, D;
      font-weight: normal;
      line-height: 20px;
    }
  }
  .total {
    margin-top: 10px;
    font-family: D-DINExp, D-DINExp;
    font-weight: bold;

    .sum {
      font-size: 28px;
      line-height: 32px;
      margin-right: 4px;
    }
    .unit {
      font-size: 14px;
      line-height: 30px;
    }
  }
  &:last-child {
    margin-right: unset;
  }
}
</style>
